<template>
    <!-- 按钮选项组 -->
    <div class="flex flex-wrap gap-2 ml-2 mb-2">
        <!-- 调整行高 -->
        <el-tooltip effect="dark" content="调整行高" placement="bottom">
            <el-input-number style="width: 120px" v-model="rowHeight" :min="80" :max="120" :step="5" step-strictly />
        </el-tooltip>

        <!-- 搜索框+按钮 -->
        <el-input
            style="width: 180px"
            v-model="searchPermissionValue"
            placeholder="请输入权限关键字查询"
            clearable
            @keydown.enter="searchPermissionEvent"
            @clear="inputClearEvent"
        />
        <el-button @click="searchPermissionEvent" :icon="Search">搜索</el-button>

        <!-- 选项 -->
        <el-button-group>
            <el-button type="primary" @click="getAllPermissionEvent" :icon="Refresh">刷新</el-button>
        </el-button-group>
    </div>

    <!-- 表格展示 -->
    <div style="height: calc(100vh - 120px)">
        <el-auto-resizer>
            <template #default="{ height, width }">
                <FTableV2
                    v-model="selected"
                    :data="data"
                    :width="width"
                    :height="height"
                    :row-height="rowHeight"
                    :other-column="otherColumn"
                    :disable="disable"
                ></FTableV2>
            </template>
        </el-auto-resizer>
    </div>
</template>

<script setup lang="tsx">
import { getAllPermission } from '@api/system/index';
import { Column, ElSwitch } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { useDictionaryStore } from '@/store/modules/dictionary';
import { checkRole } from '@/utils/permission';
import { checkTypeBoolean } from '@/utils/check';

onMounted(() => {
    generateDisableColumn();
    getAllPermissionEvent();
});

/* ******************************通用属性/方法****************************** */
// 字典仓库
const useDictionary = useDictionaryStore();
// 表格选中数据
const selected = reactive<string[]>([]);
// 获取用户数据
const getAllPermissionEvent = () => {
    // 清空数据
    dataCache.splice(0);
    data.splice(0);
    selected.splice(0);
    // 获取所有系统权限
    getAllPermission().then((res) => {
        // 加工成表格数据
        res.data.forEach((item, index) => {
            item.checked = false;
            item.order = index + 1;
            item.editing = false;
            data.push(item);
            dataCache.push(item);
        });
    });
};

/* ******************************搜索栏属性/方法****************************** */
const searchPermissionValue = ref('');
const searchPermissionEvent = () => {
    if (searchPermissionValue.value == '') {
        // 原始数据
        data.length = 0;
        dataCache.forEach((item) => {
            data.push(item);
        });
    } else {
        // 筛选数据
        data.length = 0;
        dataCache.forEach((item) => {
            if (
                item.group.includes(searchPermissionValue.value) ||
                item.permission.includes(searchPermissionValue.value) ||
                item.description.includes(searchPermissionValue.value)
            ) {
                data.push(item);
            }
        });
    }
};
// 输入框清空事件
const inputClearEvent = () => {
    // 原始数据
    data.length = 0;
    dataCache.forEach((item) => {
        data.push(item);
    });
};

/* ******************************组件el-table-v2 表格属性****************************** */
// 表格数据
const data = reactive<AjaxResponse['permissionData']>([]);
// 缓存数据
let dataCache: AjaxResponse['permissionData'] = [];
// 禁用列
const disable = reactive<string[]>([]);
// 表格独有的column
const otherColumn = reactive<{ [key: string]: Column<any> }>({
    description: {
        key: 'description',
        dataKey: 'description',
        title: '权限说明',
        width: 250,
        align: 'center',
        cellRenderer: ({ rowData }) => {
            return <div>{rowData.description}</div>;
        }, 
    },
    modify: {
        key: 'modify',
        dataKey: 'modify',
        title: '修改',
        width: 250,
        align: 'center',
        cellRenderer: ({ rowData, column }) => {
            // 转换为布尔值
            const boo = checkTypeBoolean(rowData[column.dataKey!]);
            return <ElSwitch modelValue={boo} disabled={true} />;
        },
    },
});
// 生成禁用列 -- 根据字典提供的权限加工otherColumn对象生成禁用列表
const generateDisableColumn = () => {
    // 遍历所有字段
    for (const key in otherColumn) {
        if (Object.prototype.hasOwnProperty.call(otherColumn, key)) {
            // 获取key在字典中的数据
            const { definition, roles } = useDictionary.getDictionaryUseField(key);
            // 判断是否为空，如果为空，则禁用该字段
            if (definition == '') {
                disable.push(key);
                continue;
            }
            // 判断当前用户是否有权限查看该字段
            if (!checkRole(roles)) {
                disable.push(key);
            }
        }
    }
};
// 表格高度
const rowHeight = ref(80);
</script>

<style></style>
